<!-- 常规确定按钮组件 -->
<template>
	<view class="button-box" @click="buttonClick">
		<view class="button" :style="{backgroundColor: buttonBgc, lineHeight: height+'rpx', borderRadius: height/2 + 'rpx'}">{{buttonText}}</view>
	</view>
</template>

<script>
	export default {
		name:"define-button",
		props: {
			// 按钮的文字
			buttonText: {
				type: String,
				default: '确定'
			},
			// 按钮的背景颜色
			buttonBgc: {
				type: String,
				default: '#00C9B1'
			},
			// 按钮高度(单位 rpx 只接受数字类型)
			height: {
				type: Number,
				default: 96
			}
		},
		data() {
			return {
			};
		},
		methods: {
			buttonClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
.button-box {
	width: 100%;
	height: 96rpx;
	padding: 0 30rpx;
	.button {
		width: 100%;
		// line-height: 96rpx;
		// border-radius: 48rpx;
		text-align: center;
		background-color: $u-text-color;
		font-size: 32rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FFFFFF;
		padding: 0 4em;
	}
}
</style>
